<template>
  <SettingItem :title="$t('settingDrawer.animateSettings')">
    <div>
      <a-list :split="false">
        <a-list-item>
          <template #actions>
            <a-switch size="small" :checked="animateDisable" @change="onAnimateDisable" />
          </template>
          <a-list-item-meta>
            <template #title>{{ $t('settingDrawer.disableAnimate') }}</template>
          </a-list-item-meta>
        </a-list-item>
        <a-list-item>
          <template #actions>
            <a-select
              size="small"
              style="width: 100px"
              :value="animate"
              :disabled="animateDisable"
              @change="onAnimateChange"
            >
              <a-select-option v-for="(item, index) in animates" :key="index" :value="item.name">{{
                item.alias
              }}</a-select-option>
            </a-select>
          </template>
          <a-list-item-meta>
            <template #title>{{ $t('settingDrawer.animate') }}</template>
          </a-list-item-meta>
        </a-list-item>
        <a-list-item>
          <template #actions>
            <a-select
              size="small"
              style="width: 100px"
              :value="animateDirection"
              :disabled="animateDisable"
              @change="onAnimateDirectionChange"
            >
              <a-select-option v-for="(item, index) in directions()" :key="index" :value="item">{{
                item
              }}</a-select-option>
            </a-select>
          </template>
          <a-list-item-meta>
            <template #title>{{ $t('settingDrawer.animate') }}</template>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
  </SettingItem>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { animateDisable, animate, animateDirection } from '@/store/useSiteSettings'
import SettingItem from './SettingItem.vue'
import animates from '@/config/animate.config.js'
import {
  TOGGLE_ANIMATE,
  TOGGLE_ANIMATE_DISABLE,
  TOGGLE_ANIMATE_DIRECTION
} from '@/store/mutation-types'
export default defineComponent({
  components: {
    SettingItem
  },
  setup() {
    const { commit } = useStore()

    const onAnimateDisable = (checked) => {
      commit(TOGGLE_ANIMATE_DISABLE, checked)
    }

    const directions = () => {
      return animate.value ? animates?.find((item) => item.name == animate.value)?.directions : []
    }
    const onAnimateChange = (val) => {
      commit(TOGGLE_ANIMATE, val)
      commit(TOGGLE_ANIMATE_DIRECTION, directions()[0])
    }
    const onAnimateDirectionChange = (val) => {
      commit(TOGGLE_ANIMATE_DIRECTION, val)
    }
    return {
      animate,
      animateDisable,
      onAnimateDisable,
      animates,
      onAnimateChange,
      directions,
      animateDirection,
      onAnimateDirectionChange
    }
  }
})
</script>
<style lang="less"></style>
